<script setup>
import { Down, Avatar } from '@icon-park/vue-next'

const emits = defineEmits(['navChange'])
const props = defineProps({
    nav: { type: Array, default: [] }, //导航数据
    current: { type: String, default: '0' }, //默认选中索引
})
const router = useRouter()
const route = useRoute()

const data = reactive({
    username: '管理员'
})

onMounted(() => {
    const userInfo = func.jsonStorage(config.storage.loginInfo)
    data.username = userInfo.nickname || userInfo.username
    bus.on('loginInfo', (info) => {
        data.username = info.nickname || info.username
    });
})

//打开外部链接
const windowOpen = (path) => {
    if (typeof window != undefined) {
        window.open(path)
    }
}
//退出登陆
const loginOut = () => {
    axios.get('/auth/loginOut').then((response) => {
        localStorage.setItem(config.storage.loginInfo, '')
        localStorage.setItem(config.storage.loginToken, '')
        router.push('/login')
    })
}
</script>

<template>
    <div class="flex-2 header">
        <div class="flex">
            <router-link to="/" class="logo"></router-link>
            <el-menu class="nav" :default-active="props.current.toString()" mode="horizontal"
                @select="(key) => { emits('navChange', key); }" :ellipsis="false">
                <template v-for="(item, key) in props.nav" :key="key">
                    <el-menu-item :index="key.toString()">{{ item }}</el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="flex pr20">
            <el-link href="https://element-plus.youqua.cn/zh-CN/component/overview.html" target="_blank">
                element-plus文档</el-link>
            <el-text class="line">|</el-text>
            <el-link href="https://v3.cn.vuejs.org/guide/introduction.html" target="_blank">vue文档 </el-link>
            <el-text class="line">|</el-text>
            <el-dropdown trigger="click">
                <el-link :underline="false">
                    <span>其他</span>
                    <Down />
                </el-link>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="windowOpen('https://vitejs.cn/guide/')">Vite</el-dropdown-item>
                        <el-dropdown-item @click="windowOpen('https://router.vuejs.org/zh/introduction.html')">Vue
                            Router</el-dropdown-item>
                        <el-dropdown-item
                            @click="windowOpen('https://pinia.web3doc.top/introduction.html')">Pinia</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-text class="line">|</el-text>
            <el-dropdown trigger="click">
                <el-link :underline="false">
                    <Avatar />
                    <span>&nbsp;{{ data.username }}</span>
                    <Down />
                </el-link>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item
                            @click="router.push('/admin/edit?id=my&back=' + encodeURIComponent(route.fullPath))">修改用户信息</el-dropdown-item>
                        <el-dropdown-item @click="loginOut()" divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped lang="scss">
.header {
    .logo {
        height: 60px;
        width: 200px;
        background: url("@/assets/images/logo.png") center center no-repeat;
        background-size: 100%;
    }

    .nav {
        height: 60px;
        border: none;
    }

    .line {
        color: var(--el-border-color);
        padding: 0px 10px;
    }
}
</style>
